<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body >
<div id="main" style="width: 505px;height: 530px;"></div>
<script>
    $(function () {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.get('js/dongying.json', function (geoJson) {
            myChart.hideLoading();
            echarts.registerMap('东营市', geoJson);

            myChart.setOption(option = {
                visualMap: {
                    min: 0,
                    max: 500,
                    show: false,
                    splitNumber: 5,
                    inRange: {
                        color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: '东营市',
                    label: {
                        normal: {
                            show: true,
                            color: '#fff'
                        },
                        emphasis: {
                            show: true,
                            color: '#fff'
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#40458e',
                            borderColor: '#6367ad',
                            borderWidth: 1.5
                        },
                        emphasis: {
                            areaColor: '#40458e'
                        }
                    },
                    "left": 0,
                    "right": 0,
                    "top": 0,
                    "bottom": 0
                },
                series: [{
                    name: '活跃人数分布',
                    type: 'heatmap',
                    coordinateSystem: 'geo',
                    blurSize: 30,
                    data: []
                }]
            });
        });
    })
</script>
</body>
</html>
